<template>
  <div id="page-wrapper" class="gray-bg">
    <header-link/>
    <div class="row wrapper border-bottom white-bg page-heading">
      <div class="col-sm-4">
        <h2>课程描述查询</h2>
        <ol class="breadcrumb">
          <li>
            <router-link :to="{ name: 'home' }">
              主页
            </router-link>
          </li>
          <li class="active">
            <strong>课程描述查询</strong>
          </li>
        </ol>
      </div>
    </div>

    <div class="wrapper container wrapper-content animated fadeInUp">
      <div class="ibox">
        <div class="ibox-title">
          <h5></h5>
          <div class="ibox-tools">
            <router-link :to="{ name: 'courseDescriptionAdd'}" class="btn btn-primary btn-xs" target="_blank">
              <i class="fa fa-plus"></i>
              新建
            </router-link>
          </div>
        </div>
        <div class="ibox-content">
          <div class="input-group">
            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label class="control-label">
                          学校名称
                        </label>
                        <input type="text" v-model="search.schoolname" class="form-control">
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="form-group">
                        <label class="control-label">课程名称</label>
                        <input type="text" v-model="search.name" class="form-control">
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="form-group">
                        <label class="control-label">编辑人</label>
                        <input type="text" v-model="search.lastedit" class="form-control">
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label class="control-label">课程描述关键字</label>
                        <input type="text" v-model="search.description" class="form-control">
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label class="control-label">
                          课程类别
                        </label>
                        <select  class="form-control" v-model="search.courseType">
                          <option v-for="item in common.enum.courseTypeList" v-bind:value="item.key" >{{ item.value }}</option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-3 col-sm-offset-5" style="text-align: right;">
                    <div class="form-group">
                      <label class="control-label"style="color: #ffffff; width: 100%;" >查询</label>
                      <button type="button" class="btn btn-w-m btn-primary" v-on:click="getCourseDescriptionList()">查询</button>
                    </div>
                </div>
            </div>

          </div>

              <table class="table">
                <thead>
                  <tr>
                      <th>ID</th>
                      <th>学校名称</th>
                      <th>课程名称</th>
                      <th>课程类别</th>
                      <th>主要内容</th>
                      <th>课程描述</th>
                      <th>课本（literature）</th>
                      <th>最后编辑人</th>
                      <th style="min-width: 150px;">操作</th>

                  </tr>
                  </thead>
                  <tbody>
                  <tr v-for="(item, index) in courseList">
                      <td>{{ item.id }}</td>
                      <td>{{ item.schoolname }}</td>
                      <td>{{ item.name }}</td>
                      <td>{{ (item.other3 && item.other3 != 0) ? common.enum.courseType[item.other3] : '-' }}</td>
                      <td>{{ item.other1 ? item.other1.substring(0, 10) + '......' : '-' }}</td>
                      <td>
                        {{ item.description ? item.description.substring(0, 10) + '......' : '-' }}

                        <router-link :to="{ name: 'courseDescriptionDetail', query: { id: item.id } }" target="_blank">
                          更多
                        </router-link>
                      </td>
                      <td>{{ item.other2 ? item.other2.substring(0, 10) + '......' : '-' }}</td>
                      <td>{{ item.lastedit }}</td>
                      <td>
                        <router-link :to="{ name: 'courseDescriptionDetail', query: { id: item.id } }" target="_blank" class="btn btn-info btn-xs">
                          详情
                        </router-link>
                        <router-link :to="{ name: 'courseDescriptionEdit', query: { id: item.id } }" target="_blank" class="btn btn-primary btn-xs">
                          编辑
                        </router-link>
                        <span v-on:click="deleteCourse(item.id)" class="btn btn-warning btn-xs">
                          删除
                        </span>
                      </td>
                  </tr>
                </tbody>
              </table>


        </div>
      </div>
    </div>
    
  </div>

</template>

<script>
import header from '@/components/Header.vue'
import server from '@/server/server.js'
import common from '@/server/common.js'
export default {
  name: 'demo',
  data () {
    return {
      common: common,
      search: {
        schoolname: '',
        name: '',
        lastedit: '',
        description: '',
        courseType: '',
      },
      courseList: [
      ]
    }
  },
  components: {
    'header-link': header
  },
  created () {
  },
  mounted () {
  },
  methods: {
    getCourseDescriptionList() {
      var vue = this;
      vue.search.other3 = vue.search.courseType
      server.post(server.postCourseDescriptionListUrl, null, vue.search, true, false, this, function(data) {
          // console.log(data)
          vue.courseList = data;
      })
    },

    deleteCourse(id) {
      var vue = this;
      if (confirm("是否确定要删除该课程描述？")) {
        
        server.post(server.postCourseDescriptionDeleteUrl, null, { id: id }, true, false, this, function(data) {
          vue.$toastr('success', '删除成功', '成功')
          // 跳转课程描述列表页面
          vue.getCourseDescriptionList();
        })

      }

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#page-wrapper {
  margin: 0;
}
.container {
  margin-top: 20px;
}
.table {
  margin-top: 20px;
}
</style>
